<template>
  <div class="main-content">
    <!-- 左右区域 -->
    <div style="display: flex; grid-gap: 30px">
      <!-- 左 -->
      <div style="margin: 10px 0">
        <img :src="data.bookData.img" style="max-width: 320px; height: 360px;">
      </div>

      <!-- 右 -->
      <div style="margin: 10px 0">
        <h2 class="book-title">{{data.bookData.name}}</h2>
        <p class="book-desc">{{data.bookData.descr}}</p>
        <div style="background-color: #eeeeee">
          <div class="book-info">
            <span>作者：{{data.bookData.author}}</span>
            <span>出版社：{{data.bookData.publisher}}</span>
            <span>出版日期：{{data.bookData.date}}</span>
          </div>
          <div class="book-info">
            <span>ISBN：{{data.bookData.isbn}}</span>
            <span>零售价：{{data.bookData.price}}元</span>
            <span>剩余库存：{{data.bookData.num}}</span>
          </div>
        </div>

        <el-button type="danger" @click="borrowBook">立即借阅</el-button>
      </div>
    </div>
  </div>
</template>


<script setup>
import {reactive} from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}"),
  bookId: router.currentRoute.value.query.id,
  bookData:{},
})


const loadBook=()=>{
  request.get(`/book/selectById/${data.bookId}`).then(res=>{
    if(res.code==='200'){
      data.bookData=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadBook()

const decreaseQuantity=()=>{
  data.borrowQuantity=data.borrowQuantity-1
}

const increaseQuantity=()=>{
  data.borrowQuantity=data.borrowQuantity+1
}

const borrowBook=()=>{
  request.post("/record/add",{
    userId: data.user.id,
    bookId: data.bookId
  }).then(res=>{
    if(res.code==='200'){
      ElMessage.success('操作成功，等待管理员审核')
    }else {
      ElMessage.error(res.msg)
    }
  })

}
</script>

<style scoped>
.main-content {
  max-width: 900px;
  margin: 10px auto;
}

.book-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.book-desc {
  line-height: 1.6;
  margin-bottom: 15px;
}

.book-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.book-info span {
  margin-right: 15px;
}

.borrow-notice {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 15px;
}

.quantity-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.quantity-container input {
  margin: 0 10px;
}
</style>